<script setup lang="ts">
// 引入必要的库和组件
import { ref } from 'vue'; // Vue 3 的 ref 函数用于创建响应式数据
import axios from '../api/request.ts'; // Axios 是用于发起 HTTP 请求的库
import { useRouter } from 'vue-router'; // Vue Router的钩子函数，用于程序性导航
import { useUserStore } from '../stores/user'; // 自定义的 user store，用于状态管理
// 引入 UI 组件库 Ant Design Vue 的组件
import { message, Form as aForm, FormItem as aFormItem, Input as aInput, DatePicker as aDatePicker, Button as aButton, Textarea as aTextarea } from 'ant-design-vue';

// 创建响应式数据变量
// const router = useRouter(); // 引入 Vue Router
const userStore = useUserStore(); // 引入 user store

const userInfo = ref({})
// 创建活动的方法
const editUserInfo = async () => {

  try {
    // 发起 POST 请求，修改活动
    const response = await axios.post('/users/edit', userInfo.value);
    // 请求成功后显示成功信息
    console.log('服务器响应:', response.data);
    message.success('修改个人信息成功');
    // 导航到活动列表页
    // router.push('/UserInfo');
  } catch (error) {
    // 如果请求失败打印错误信息并显示失败消息
    console.error('修改时出错:', error);
    message.error('修改个人信息失败');
  }
};
const getUserInfo = async () => {

  try {
    // 发起 POST 请求，修改活动
    const response = await axios.put('/users/info/'+ userStore.userId);
    // 请求成功后显示成功信息
    console.log('服务器响应:', response.data);
	userInfo.value = response.data
    // 导航到活动列表页
    // router.push('/UserInfo');
  } catch (error) {
    // 如果请求失败打印错误信息并显示失败消息
    console.error('修改时出错:', error);
    message.error('请求个人信息失败');
  }
};
getUserInfo();
// const goBack = () => {
//   router.push('/home');
// };
</script>

<template>
  <div class="container">
    <!-- 个人信息的表单 -->
    <div class="box">
      <h1 style="width: 500px;">个人信息</h1>
      <!-- 使用 Ant Design Vue 的表单组件，表单提交时调用 createActivity 方法 -->
      <a-form @submit.prevent="editUserInfo" class="form">
        <a-form-item label="姓名">
          <a-input v-model:value="userInfo.name" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-model:value="userInfo.phone" />
        </a-form-item>
        <a-form-item label="身份证">
          <a-input v-model:value="userInfo.userCardNo" />
        </a-form-item>
		<a-form-item label="密码">
		  <a-input v-model:value="userInfo.password" />
		</a-form-item>
		<a-form-item label="学院名称">
		  <a-input v-model:value="userInfo.userXueyuan" />
		</a-form-item>
		<a-form-item label="学号">
		  <a-input v-model:value="userInfo.userXuehao" />
		</a-form-item>
		<a-form-item label="学分">
		  <a-input v-model:value="userInfo.userXuefen" disabled/>
		</a-form-item>
		<a-form-item label="学时">
		  <a-input v-model:value="userInfo.userXueshi" disabled/>
		</a-form-item>
        <!-- 提交按钮 -->
        <a-form-item class="form-item-centered">
          <a-button type="primary" html-type="submit">修改信息</a-button>
        </a-form-item>
<!--        <a-form-item class="form-item-centered">-->
<!--          <a-button  @click="goBack">返回主页</a-button>-->
<!--        </a-form-item>-->
      </a-form>
    </div>
  </div>
</template>

<style scoped>
/* 容器用于整个登录部分，水平和垂直居中内容 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  //align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 占满整个视口高度 */
  //background-color: #f0f2f5; /* 可选：浅背景颜色 */
}

/* 包含表单和标题的背景框 */
.box {
  //padding: 20px;           /* 框内填充 */
  //background-color: white; /* 框的白色背景 */
  //border-radius: 8px;      /* 圆角 */
  //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 微妙的阴影增加深度 */
  width: 100%;
  //max-width: 640px;        /* 框的最大宽度 */
}

/* 框内的表单 */
.form {
  width: 500px;            /* 占满框的全宽 */
}

/* 自定义类以在表单项内居中按钮和链接 */
.form-item-centered {
  display: flex;           /* 使用flexbox进行对齐 */
  flex-direction: column;  /* 垂直堆叠子元素 */
  align-items: center;     /* 水平居中子元素 */
}

/* 全宽按钮，带有下方的间距 */
a-button {
  width: 100%;             /* 占满表单项的全宽 */
  margin-bottom: 10px;     /* 按钮下方的间距 */
}


h1 {
  text-align: center;
}

</style>
